<%@ page contentType="text/html" pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page isELIgnored="false" %>
<html>
<head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
        google.load('visualization', '1', {'packages':['annotatedtimeline']});
        google.setOnLoadCallback(drawChart);
        function drawChart() {
            var data = new google.visualization.DataTable();
            data.addColumn('datetime', 'Date');
            data.addColumn('number', 'Temperature');

            data.addRows([
                <c:forEach var="temperature" items="${temperatures}">
                [new Date(${temperature.cal.time.time}), ${temperature.temperature}],
                </c:forEach>
            ]);

            var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
            chart.draw(data, {displayAnnotations: true,displayRangeSelector:false,displayZoomButtons:false,fill:50,displayLegendValues:true,displayLegendDots:true,displayExactValues:true});
        }
    </script>
</head>
<body>
********************************************************************</br>
* Hallo ${user.nickname}</br>
********************************************************************</br>
<div id='chart_div' style='width: 540px; height: 240px;'></div>
********************************************************************</br>
* Aktuelle Wassertemperatur Attersee ${currenttemperature} Grad</br>
********************************************************************</br>
<c:forEach var="temperature" items="${temperatures}">
    * ${temperature.cal.time} - ${temperature.temperature} Grad</br>
</c:forEach>
********************************************************************</br>
</body>
</html>